<template>
    <div>
      <!-- 按钮用于打开/关闭弹出窗口 -->
      <button @click='showPopup=!showPopup'>打开弹出窗口</button>
  
      <!-- 弹出窗口的内容，使用 v-if 指令来根据 showPopup 的值决定是否显示 -->
      <div v-if="showPopup">
        <h2>弹出窗口内容</h2>
        <button @click="showPopup = false">关闭</button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        showPopup: false
      };
    }
  };
  </script>
  
  <style scoped>
  /* 隐藏弹出窗口 */
  .popup {
    display: none;
  }
  
  /* 弹出窗口的样式 */
  .popup.show {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: yellow;
    padding: 20px;
    border: 2px solid black;
    border-radius: 5px;
  }
  </style>